<template>
 <div class="header">
     <div class="header-left">
         <div class="iconfont back-icon" >&#xe658;</div>
     </div>    
     <div class="header-input">
        <span class="iconfont">&#xe63c;
            </span>输入城市/景点/游玩主题</div>
            <router-link to='/city'>
            <div class="header-right">
                {{this.city}}
                <span class="iconfont arrow-icon">&#xe654;</span></div>
             </router-link>
            </div>
</template>
<script>

    export default {
        name:'HomeHeader',
        props:{
            city:String
        }

    }
    //  scoped:只对当前组件有效果
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl';
    .header
       display:flex
       line-height: $headerHeight
       background: $bgColor
       color:#fff
    .header-left
          width:.64rem
          float:left
      .back-icon
          text-align:center
          font-size:.30rem
    .header-input
          flex:1
          height :.35rem
          line-height :.35rem
          margin-top:.12rem
          margin-bottom :.12rem
          margin-left:.2rem
          padding:.2rem
          background :#fff
          border-radius:.1rem
          color:#ccc
    .header-right
          width :1.04rem
          margin-top:.1rem
          padding:.1rem .1.5rem
          float:right
          font-size:.2.7rem
          text-align:center
          color:#fff
        .arrow-icon
            font-size:.24rem
            margin-left:-.04rem
</style>

